<template>
  <div>
    <!-- 导航链接 -->
    <router-link to="/">
      <button>Home</button>
    </router-link>
    <router-link to="/notice">
      <button>弹窗类组件</button>
    </router-link>
    <router-link to="/tree">
      <button>递归组件</button>
    </router-link>
    <router-link to="/about">
      <button>About</button>
    </router-link>
    <router-link to="/list/1234">
      <button>list-嵌套式路由(props传值)</button>
    </router-link>
    <router-link to="/user/5566">
      <button>user(参数传值)</button>
    </router-link>
    <button @click="viewComponent('about')">About编程式路由</button>
    <router-link to="/globalGuard">
      <button>全局路由守卫</button>
    </router-link>
    <router-link to="/exclusiveGuard">
      <button>路由独享守卫</button>
    </router-link>
    <router-link to="/componentGuard">
      <button>组件内路由守卫</button>
    </router-link>
    <router-link to="/breadCrumb">
      <button>面包屑导航</button>
    </router-link>
    <!-- 路由视图：list页面的内容会显示在router-view中 -->
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  name: 'Father',
  data() {
    return {}
  },
  methods: {
    // 路由跳转
    viewComponent(value) {
      if(value == 'about') {
        this.$router.push({
          path: "/about",
          query: {
            name: "张三"
          }
        })
      }
    },
  }
}
</script>